<template>
  <!-- 页面布局card通用组件 -->
  <PageCard>
    <!-- 头部工具栏 -->
    <ToolBar>
      <el-form :model="queryForm" label-width="80px">
        <el-row :gutter="24">
          <el-col :span="4">
            <el-form-item label="关键词:">
              <el-input
                v-model="queryForm.keyword"
                placeholder="手机号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-button type="default" @click="loadTableData">查询</el-button>
            <el-button type="default" @click="resetQuery">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </ToolBar>

    <!-- 表格 -->
    <TablePage
      ref="phoneCodeTablePage"
      :customTableHeight="255"
      :loading.sync="loading"
      :table-data="phoneCodeTableDatas"
      :columns="columns"
      @reloadData="loadTableData"
    />
  </PageCard>
</template>
<script>
import PageCard from "@/components/PageCard/index.vue";
import ToolBar from "@/components/ToolBar/index.vue";
import TablePage from "@/components/TablePage/index.vue";

import { phoneCodePage } from "@/api/phone-code";

export default {
  name: "PhoneCodePage",
  components: {
    PageCard,
    ToolBar,
    TablePage,
  },
  data() {
    return {
      queryForm: null,
      initForm: {
        keyword: "",
      },
      loading: false,
      phoneCodeTableDatas: [],
      columns: [
        {
          title: "手机号",
          name: "phone",
          width: 150,
          align: "center",
        },
        {
          title: "验证码",
          name: "code",
          width: 150,
          align: "center",
        },
        {
          title: "短信内容",
          name: "content",
          width: 350,
          align: "left",
        },
        {
          title: "失效时间",
          name: "expireTime",
          width: 180,
          align: "center",
        },
        {
          title: "创建时间",
          name: "createTime",
          width: 180,
          align: "center",
        },
      ],
    };
  },
  created() {
    this.queryForm = { ...this.initForm };
    this.$nextTick(() => {
      this.loadTableData();
    });
  },
  methods: {
    //加载数据
    async loadTableData() {
      this.loading = true;
      console.log(this.queryForm);
      const { pageNumber, pageSize } = this.$refs.phoneCodeTablePage.page;
      const res = await phoneCodePage({
        pageNumber,
        pageSize,
        ...this.queryForm,
      });
      this.$refs.phoneCodeTablePage.page.pageNumber = res.data.pageNumber;
      this.$refs.phoneCodeTablePage.page.pageSize = res.data.pageSize;
      this.$refs.phoneCodeTablePage.page.total = res.data.total;
      this.phoneCodeTableDatas = res.data.rows;
      this.loading = false;
    },

    // 重置查询
    resetQuery() {
      this.queryForm = { ...this.initForm };
      this.loadTableData();
    },
  },
};
</script>
<style lang="scss" scoped></style>
